<template>
  <div class="jaguar-view">
    <el-page-header @back="$router.go(-1)" />
    <br />

    <div class="jaguar-search" />
    <div class="jaguar-control">
      <el-button type="primary" icon="delete" @click="clearHandler"
        >清空</el-button
      >
    </div>

    <el-card class="jaguar-table">
      <el-table :data="tableData" table-layout="auto">
        <el-table-column label="时间" width="200">
          <template #default="scope">
            {{ new Date(scope.row.timestamp).toLocaleString() }}
          </template>
        </el-table-column>

        <el-table-column label="页面与组件" min-width="50%">
          <template #default="scope">
            {{ scope.row.url }} : {{ scope.row.vmName }}
          </template>
        </el-table-column>

        <el-table-column
          prop="err.stack"
          label="错误"
          min-width="300"
          class-name="stack"
        >
          <template #default="scope">
            <div>
              {{ scope.row.info }}
            </div>
            {{ scope.row.err.stack }}
          </template>
        </el-table-column>
      </el-table>

      <table-page :page="page" :search="getData" />
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'ErrorLog',
  data() {
    return {
      tableData: [],
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
    }
  },
  computed: {
    errorLogs() {
      return this.$store.getters.errorLogs
    },
  },
  created() {
    this.getData()
  },
  methods: {
    getData(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      let tableData = []
      let start = (this.page.current - 1) * this.page.size
      let end = Math.min(start + this.page.size, this.errorLogs.length)
      for (let i = start; i < end; i++) {
        tableData.push(this.errorLogs[i])
      }

      this.tableData = tableData
      this.page.total = this.errorLogs.length
    },
    clearHandler() {
      this.$store.dispatch('errorLog/clearErrorLog')
      this.tableData = []
      this.page = {
        total: 0,
        current: 1,
        size: 10,
      }
    },
  },
}
</script>
<style lang="scss">
.stack {
  .cell {
    white-space: pre-wrap;
  }
}
</style>
